<template>
    <div>
    <Header></Header>
    <!--场地详情开始-->
		<div class="detailBox w1200 bc " >
			<!--详情顶部-->
			<div class="detailTop  bg100  mt20  clearfix">
				<!--左图片部分-->
        <div class="prcWrap w630 h420 overflow fl pr">
          <div class="mainImgShow">
            <img :src="imgUrl[0]+'?x-oss-process=image/resize,m_fill,h_320,w_630'" alt="" ref="mainUrl">
          </div>
          <div class=" samllImg clearfix">
            <a class="abs-left w15 h30 mt-15 fun" fun="left" @click="changeListPic" style="z-index:7;cursor:pointer;">
              <img src="static/images/prev.png" fun="left"/>
            </a>
            <a class="abs-left w15 h30 mt-15 fun" style="margin-left:615px;z-index:7;cursor:pointer;" @click="changeListPic" fun="right">
              <img src="static/images/next.png" fun="right"/>
            </a>
            <div id="samllImglist">
              <div v-for="item in imgUrl" class="imgListBottom">
                <img  :data-src="item+'?x-oss-process=image/resize,m_fill,h_320,w_630,limit_0'" :src="item+'?x-oss-process=image/resize,m_fill,h_90,w_150,limit_0'" alt="" @click="changeImg">
              </div>
            </div>
          </div>
        </div><!--图片部分结束-->
				<div class="txtWrap w570  fl">
					<div class="bb94 pb10 pt15 ml30 mr20">
						<img class="mr10" :src="userInfo.imgUrl" width="30" height="30"/>
						<span class="f14 c60 lh30">{{userInfo.nickName}}</span>
					</div>
					<dl class="mt10 fm_songti   f14 lh32 ">
						<dt class="ml30 mr20" >
							<b class="f20 fn lh200 c20 fm_yahei">{{activityName}}</b>
						</dt>
						<dd class=" clearfix mt10 ml0 bg_orgwhite_fff8ee p20 pl30 pb20  " >

							<ul class="f14 lh200">
								<li class="clearfix pr">
									<span class="fl w80 c40">活动时间：</span>
									<span class="fl c7 fm">{{startTime}}</span>
									<span class="fl mr5 ml5">至</span>
									<span class="fl c7 fm">{{endTime}}</span>
									<div class="flag-icon-r abs-right-top" style="right:-21px;">
										<div class="flag-icon-l">{{count(startTime,endTime)}}天</div>
									</div>
								</li>
								<li class="clearfix mt10">
									<span class="fl w80 c40">活动人数：</span>
									<span class="fl f24 fm c_org_fc8900">{{userCount}}</span>
									<span class="fl f24 c_org_fc8900 mr5 ml5">/</span>
								    <span class="fl f30 fm c_org_fc8900 mr15">{{limitCount}}</span>
									<span class="fl c7">人</span>
									<i class="fl ml50 mt5 br2 b_dot_org_fc8900 inline-block c_org_fc8900 f12 h20 lh20  letter2 pl10 pr10 ">{{cost}}</i>
								</li>
							</ul>
						</dd>
						<dd class="clearfix ml30 mr20 mt20">
							<span class="fl w80 c40">集合地点：</span>
							<span class="fl c7">{{address}}</span>
							<span class="c60 fr locationBg fm-songti"><i class="inline-block w15 "></i>{{'距离'+initMap(lat, lng)+'km'}}</span>
						</dd>
						<dd class="clearfix ml30 mr20">
							<span class="fl w80 c40">活动地点：</span>
							<span class="fl c7">{{Fulladdress}}</span>
						</dd>
						<dd class="clearfix ml30 mr20">
							<span class="fl w80 c40">领&nbsp;&nbsp;队：</span>
							<span class="fl c7 fm">{{initiatorName}}/{{initiatorPhone}}</span>
						</dd>
						<dd class="mt20 ml30 mr20 clearfix">
							<button class="fl mr20 br2 pr15 pl15 h30 lh30 fb b_dot_org_fc8900 c_org_fc8900 bg100  "><img class="mt10 mr5  inline-block" src="static/images/icon-exel.png" /> {{status}}</button>
							<button  @click="toJoin()" v-if="statusNum===0" class="fl pr25 br2 pl25 h30 lh30 c100 bg_grn_119c5b hoverbg_orgred pointer">{{userStatus}}</button>
						</dd>
					</dl>
				</div><!--文字部分结束-->
			</div>
			<!--详情顶部结束-->
			<!--精彩瞬间-->
			<!--<div class="w1200 bc bg100 pt15 pb20 pl20 pr20 mt20">-->
				<!--<h1 class="bb_grn_2 h38 pr">-->
					<!--<i class="mr5 vm square-grn"></i>-->
					<!--<b class="f18  fm-yahei lh100 vm c_grn_119c5b">精彩瞬间</b>-->
					<!--<i i class="ml5 vm square-grn"></i>-->
					<!--<button  @click="downApp()" class="abs-right hoverborder_grn pointer mt-15 f12 c60 lh150 b87 br10 pl10 pr10 bg100 pointer">换一批</button>-->
				<!--</h1>-->
				<!--<ul class="clearfix mt20">-->
          <!--<li v-if="data01.length===0">-->
            <!--<p style="text-align: center;line-height:150px;">暂无精彩瞬间</p>-->
          <!--</li>-->
          <!--<li v-else class="fl mr10 pr w224 h138 specialLi" v-for="(item,index) in data01" @click="showWView(data01,index)">-->
            <!--<span class="playBtn" v-if="item.flag===2"></span>-->
            <!--<img class="bg84" :src="item.flag===1?item.fileName+'?x-oss-process=image/resize,m_fill,h_138,w_224,limit_0':item.thumFileName+'?x-oss-process=image/resize,m_fill,h_138,w_224'"/>-->
            <!--<p class="abs-left-bottom w c100 f12 lh200 ti10 bg0-alpha40 ">{{limitworld(item.description,15,"...")}}</p>-->
          <!--</li>-->
				<!--</ul>-->
			<!--</div>-->
			<!--精彩瞬间结束-->
			<!--详情介绍-->
			<div class="w1160 bc bg100 pt15 pb20 pl20 pr20 mt20">
				<!--活动介绍-->
				<div class="lineWrap">
					<h1 class="bb_grn_2 h38 mt20">
						<i class="mr5 vm square-grn"></i>
						<b class="f18 fm-yahei lh100 vm c_grn_119c5b">活动介绍</b>
						<i i class="ml5 vm square-grn"></i>
					</h1>
					<div class="mt30">
            <div v-if="activityDescripition===null||activityDescripition===''" ref="jsonDetail">
            </div>
            <p v-else class="tc summary" style="min-height: 400px;">
              <pre>{{activityDescripition}}</pre>
						</p>
					</div>
				</div><!--经典线路 lineWrap结束-->
				<!--场地入口-->
				<div class="enterWrap">
					<h1 class="bb_grn_2 h38 mt40">
						<i class="mr5 vm square-grn"></i>
						<b class="f18 fm-yahei lh100 vm c_grn_119c5b">活动集合点</b>
						<i i class="ml5 vm square-grn"></i>
					</h1>
					<!--地图-->
					<div class="b87 clearfix mt30">
		              <div class="br_ddd fl mapBox">
		                <div id="container" class="copy" style="width:1158px; height:320px;">

		                </div>
		                <div id="userLocation" style="width:0;height:0;display: none;"></div>
		                <div id="addressBox">
		                	<p>
		                		<span class="lng">
		                			E:{{lng}}
		                		</span>
		                		<span class="lat">
		                			N:{{lat}}
		                		</span>
		                	</p>
		                	<p>{{(jiheaddress==="")?address:jiheaddress}}</p>
		                </div>
		              </div>
					</div>
          <!--地图结束-->
				</div>

				<!--场地入口 enterSWrpa结束-->
				<!--关联场地-->
				<div class="lineWrap">
					<h1 class="bb_grn_2 h38 mt20">
						<i class="mr5 vm square-grn"></i>
						<b class="f18 fm-yahei lh100 vm c_grn_119c5b">关联场地</b>
						<i i class="ml5 vm square-grn"></i>
					</h1>
					<div class="mt30">
						<div class="areaSite " v-if="placeData.length>0">
					        <li v-for="(list,index) in placeData" class="clearfix b87 mt20 hoverborder_orgred" @click="goDetail(index)">
					          <img class="fl w350 h230" v-if="list.imgUrl" :src="list.imgUrl.split(',')[0]+'?x-oss-process=image/resize,m_fill,h_230,w_350'"/>
					          <dl class="fl h230 ml30" style="width:755px;">
					            <dt class="h60 clearfix bb87">
					              <b class="f20 lh60 c20 fm_yahei ">{{limitworld(list.placeName,15,'...')}}</b>
					              <p class=" fr f14 lh60 vm c40 fm_songti">
					                <span>【</span>
					                <span>城市：{{list.cityName}}</span>
					                <img class="vm" src="../../../static/images/dot-line.png" alt=""/>
					                <span>类型：{{list.placeTypeName}}</span>
					                <img class="vm" src="../../../static/images/dot-line.png" alt=""/>
					                <span>距离：{{initMap(list.lat,list.lng)}}km</span>
					                <span>】</span>
					              </p>
					            </dt>
					            <dd class="clearfix f14 lh200 fm_yahei c40 mt10 vm">
												<span><b class="vm">星级：</b>
												<i v-for="(i,index) in 5" :class="{redStar:list.difficulty>index}" class="grayStar ml10"></i>
												</span>
					              <span class="ml40"><b class="vm">简易程度：</b>
												<i v-for="(i,index) in 5" :class="{redStar:list.difficulty>index}" class="grayStar ml10"></i>
												</span>
					              <span class="fr c60 vm ">已来过<span class="fm c_red_ce2636 mr5 ml5">{{list.userCount}}</span>人</span>
					            </dd>
					            <dd class=" w790 h60 overflow mt10">
					              <p class="f14 fm_songti c50 lh200 pr20">{{limitworld((list.summary===null||list.summary==="")?jsonToArray(list.jsonDescription):list.summary,150,"...")}}</p>
					            </dd>
					            <!--<dd class="mt10 clearfix">
					              <span class="fl f12 lh36 fm_songti c60">更新&nbsp;{{list.addTime.substring(0,10)}}</span>
					              <a class="fr pl20 pr20 pt10 pb10 bg_grn_119c5b br2 f12 c100 fm_songti detailMoreBg hoverbg_orgred pointer"  @click="goDetail(index)">查看详情<i
					                class="w15 h10 inline-block"></i></a>
					            </dd>-->
					          </dl>
					        </li>
					      </div>
					      <div v-else>
					        <p class="isNull">
					          暂无内容
					        </p>
					      </div>
					</div>
				</div>
        		<!--经典线路 lineWrap结束-->
				<!--领队-->
				<!--<div class="guideWrap">-->
					<!--<h1 class="bb_grn_2 h38 mt40">-->
						<!--<i class="mr5 vm square-grn"></i>-->
						<!--<b class="f18 fm-yahei lh100 vm c_grn_119c5b">向导</b>-->
						<!--<i i class="ml5 vm square-grn"></i>-->
					<!--</h1>-->
					<!--&lt;!&ndash;向导item&ndash;&gt;-->
					<!--<ul class="clearfix mt30 c20 f14 fm-yahei lh180">-->
            <!--<li v-if="data02.length===0">-->
              <!--<p style="text-align: center;line-height:150px;">暂无向导信息</p>-->
            <!--</li>-->
            <!--<li v-else v-for="item in data02" class="guideList mb5">-->
              <!--<p>{{item.guideName}}</p>-->
              <!--<p>{{item.moblile}}</p>-->
              <!--<p :class="item.costAmount==0?'c_grn_119c5b':'c_org_ff991d'">-->
                <!--{{item.costAmount==0?'免费':item.costAmount+'元/天'}}</p>-->
            <!--</li>-->
					<!--</ul>-->
				<!--</div>-->
        <!--向导guideWrap结束-->
				<!--评论-->
				<div class="commentWrap mt40 clearfix pb50" >
					<!--评论(左)-->
          <comment @loading="getComments" @getOver="getOver" my-main-score=true my-diff=false :my-urls="urls" :my-req-data="reqData" :my-thumb-data="thumbData" my-thumb-key="activityID" my-pic-list-key="listActivitycommentresourceInfo"></comment>
					<!--[热门活动+热门请圈子](右)--->
					<div class="comentsRight w198 fr">
						<!--热门活动-->
						<div class="acts c100 fm_songti f12 pb15">
							<h1 class="w h28 lh28   tl ti10 bg_pink_e15671">热门活动</h1>
							<ul >
								<li class="mt10 pointer activityNearBylist" v-for='item in activityNearBylist' @click="gotoother" :activityId="item['id']">
                  <img :src="item.coverImgUrl+'?x-oss-process=image/resize,m_fill,h_168,w_198,limit_0'"/>
                  <div class="activityInfo" :activityId="item['id']">
                    <p class="mt35" :activityId="item['id']"># {{limitworld(item['activityName'],5,"...")}} #</p>
                    <p class="time" :activityId="item['id']">{{limitworld(item['startTime'],10,"")+' 至 '+limitworld(item['endTime'],10,"")}}</p>
                  </div>
                </li>
							</ul>
						</div>
						<!--热门圈子-->
						<!--<div class="acts fm_songti f12 mt50 pb15 ">-->
							<!--<h1 class="w h28 lh28 c100  tl ti10 bg_org_e0613a">热门圈子</h1>-->
							<!--<ul class="b87 pr10 pl10 pb40 f12 pointer">-->
								<!--<li v-for="item in data04" class="clearfix mt15 bb87 pb10">-->
									<!--<img class="fl w40" :src="item.imgUrl" width="40" height="40"/>-->
									<!--<dl class="fr w130 c40 hoverfont_unl">-->
										<!--<dt class="clearfix"><b class="c_grn_119c5b">{{item.groupName}}</b><span class="c60 fr">{{item.userCount}}人</span></dt>-->
										<!--<dd class="mt10"><p class="c60 lh150">{{item.introduce}}</p></dd>-->
									<!--</dl>-->
								<!--</li>-->
							<!--</ul>-->
						<!--</div>-->
					</div><!--comentsRight结束-->
			    </div><!--comentsWrap结束-->
			</div><!--详情介绍结束-->
	    </div><!--detailBox结束-->
    <Footer></Footer>
      <Loading v-show="loadState"></Loading>
      <div id="wviewBox" v-show="viewBoxState">
        <wview :imgLists = "wviewImages" :Index="wViewIndex" @closeView="closeView"></wview>
      </div>
      <div id="joinCon" ref = "joinCon">
        <joinActivity @closeSubBox = "closeSubBox" @subSuccess="subSuccess"></joinActivity>
      </div>
      <div id="shadow" v-show = "showState"></div>
      <div id="personsBtn" @click="showPersonList" v-if="createUid==nowUserId">
        <img src="static/images/persons.png" alt="">
        <span>成员管理</span>
      </div>
      <div id="personsList" v-if="showPerson" ref="personListBox">
        <personList :is-master="isMaster" @closePersonList="closePersonList"></personList>
      </div>
    </div>
</template>
<script>
import Header from "../../components/header";
import Footer from "../../components/footer";
import axios from "../../../config/http";
import comment from "../../components/comments";
import Animate from '../../assets/animate';
import Loading from '../../components/loading';
import wview from '../../components/wview';
import Utils from '../../assets/Util'
import joinActivity from '../../components/JoinActivity'
import personList from '../../components/personList'
var lng, lat, address_, distance;
export default {
  components: {
    Header,
    Footer,
    comment,
    Loading,
    wview,
    joinActivity,
    personList
  },
  data() {
    return {
      _id: 0,
      placeName: "",
      activityName: "",
      activityDescripition: "",
      imgUrl: [],
      startTime: "",
      endTime: "",
      address: "",
      Fulladdress: "",
      userCount: "",
      limitCount: "",
      cost: 0,
      initiatorName: "",
      initiatorPhone: "",
      status: 0,
      statusNum:0,
      userInfo: {},
      distance: "",
      userStatus:"",
      userStatusNum:0,
      // 附近热门活动
      activityNearBylist: [],
      // 精彩瞬间
      data01: [],
      scheduling: "",
      data02: [],
      pageNumber: 1,
      data03: [],
      data04: [],
      data_: [],
      lengthA: "",
      Oneclick: 0,
      actived: true,
      iSee: false,
      pageSize:8,
      currentPage:0,
      lat:0,
      lng:0,
      loadState:true,
      viewBoxState:false,
      wviewImages:[],
      wViewIndex:0,
      entryData:[],
      entryResourceInfoList:[],
      showState:false,
      createUid:0,
      isMaster:0,
      showPerson:false,
      nowUserId:localStorage.getItem("uId"),
      placeData:[],
      jiheaddress:"",
      urls:{
        commentUrl:"/Activitycomment/GetList",
        thumbUrl : "/Activitycomment/Praise",
        subCommentUrl: "/Activitycomment/AddComment"
      },
      reqData:{
        "activityID": this.$route.query.id,
        "userID": localStorage.getItem("uId"),
        "pageIndex": 0,
        "pageSize": 15,
        "clientType":'pc'
      },
      thumbData:{
        "userID": localStorage.getItem("uId"),
        "commentID": 0,
        "token": localStorage.getItem("token"),
        "type": 0,
        "activityID": this.$route.query.id
      }
    };
  },
  mounted(){
        this._id = this.$route.query.id;
        this.$nextTick(
            this.getAxios()
        );
        this.$nextTick(
          this.GetSpecialDispalceList()
        );
        this.$nextTick(
          this.getGuide()
        );
        this.$nextTick(() => {
          this.preloadImg();
        })
        this.$nextTick(
        this.GetPlaceList()
      );
    },
  watch: {
    '$route' (to, from) {
      this.loadState = true;
      this._id = to.query.id;
    }
  },
  methods: {
    // 页面加载调用接口
    getAxios: function() {
      // 活动详情
      axios({
        url:"/Activity/GetDetails",
        method:"post",
        headers: {
          'client': 'pc'
        },
        data:{
          id: this._id,
          userID: localStorage.getItem('uId')
        }
      }).then(res => {
          let data = res.data.data;
          this.lng = data.lng;
          this.lat = data.lat;
          address_ = data.address;
          if(data.imgUrl){
            this.imgUrl = data.imgUrl.split(',');
          }
          this.userInfo = data.userInfo;
          this.activityName = data.activityName;
          this.activityDescripition = data.activityDescripition;
          if(data.jsonDescription){
            this.jsonToHtml(data.jsonDescription);
          }
          this.activityNearBylist = data.activityNearBylist;
          this.startTime = data.startTime.substring(0, data.startTime.length - 3);
          this.endTime = data.endTime.substring(0, data.endTime.length - 3);
          this.setAddress = data.setAddress;
          this.address = data.address;
          this.Fulladdress = data.Fulladdress;
          this.limitCount = data.limitCount;
          this.userCount = data.userCount;
          this.cost = data.cost;
          this.cost = 1 ? "收费" : "免费";
          this.initiatorName = data.initiatorName;
          this.initiatorPhone = data.initiatorPhone;
          this.statusNum = data.status;
          this.scheduling = data.scheduling;
          this.userStatusNum = data.userStatus;
          this.createUid = data.userID;
          this.isMaster = (this.createUid==this.nowUserId) ? 1 : 0;
          if (this.statusNum == 0) {
            this.status = "活动未开始";
          } else if (this.statusNum == 1) {
            this.status = "活动进行中";
          } else {
            this.status = "结束已活动";
          }
          if(data.userStatus == 0){
            this.userStatus = "我要报名";
          }else if(data.userStatus == 1){
            this.userStatus = "取消报名";
          }else{
            this.userStatus = "已加入";
          }
          this.loadState = false;
          this.makeMap();
          // 活动评论
      })
    },
//  changeEntry(e){
//    let lng = e.target.getAttribute("lng");
//    let lat = e.target.getAttribute("lat");
//    let index = e.target.getAttribute("index");
//    this.entryResourceInfoList = this.entryData[index]['resourceInfoList'];
//    this.lng = lng;
//    this.lat = lat;
//    this.makeMap();
//  },
    makeMap(){
      // 地图开始
      let that = this;
      var map = new AMap.Map('container', {
        center: [that.lng, that.lat],
        resizeEnable: true,
        zoom: 15
      });
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale','AMap.Geocoder'], function () {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.Geocoder());
      });
      var icon = new AMap.Icon({
        size: new AMap.Size(18, 41), // 图标尺寸
        image: 'static/images/map_local_current.png', // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(18, 41) // 根据所设置的大小拉伸或压缩图片
      });
      var marker = new AMap.Marker({
        position: new AMap.LngLat(that.lng, that.lat),
        offset: new AMap.Pixel(-10, -10),
        icon:icon,
        title: this.placeName
      });
       var geocoder = new AMap.Geocoder({})

	  var lnglat = [that.lng, that.lat]

	  geocoder.getAddress(lnglat, function(status, result) {
	    if (status === 'complete' && result.info === 'OK') {
	        that.jiheaddress = result.regeocode.formattedAddress;
	    }
	  })
      map.add(marker);
    },
    // 获取精彩瞬间
    GetSpecialDispalceList(){
      let that = this;
      let props = {
        url:"/Activity/GetSpecialDispalceList",
        data:{
          "activityID": this._id,
          "pageSize": 5,
          "flag": "",
          "pageIndex": 0
        },
        sCallBack:res => {
          if(res.data.code === 1){
            that.data01 = res.data.data;
          }else{
            this.$message.error("请求出错，稍后再试");
          }
        },
        eCallBack:err => {
          console.log(err);
        }
      }
      Utils.myRequest(props);
    },
    // 活动入口列表
//  GetEntryList(){
//    let that = this;
//    let Props = {
//      url:"/Activity/GetEntryList",
//      data:{
//        "activityID": this._id
//      },
//      sCallBack:res => {
//        that.entryData = res.data.data
//        that.entryResourceInfoList = res.data.data[0]["resourceInfoList"]
//      },
//      eCallBack:err => {
//        console.log(err);
//      }
//    }
//    Utils.myRequest(Props);
//  },
    // 活动关联场地
    GetPlaceList(){
      let that = this;
      let Props = {
        url:"/Activity/GetActivityPlace",
        data:{
          "activityID": this._id
        },
        sCallBack:res => {
          that.placeData = res.data.data
        },
        eCallBack:err => {
          console.log(err);
        }
      }
      Utils.myRequest(Props);
    },
    // 获取向导
    getGuide(){
      let guideProp = {
        url:"/Activity/GetGuideList",
        data:{
          "activityID": this._id
        },
        sCallBack:res => {
          if(res.data.code === 1){
              this.data02 = res.data.data;
          }else{
              this.$message.error("请求失败，请稍后再试");
          }
        },
        eCallBack:err => {
          console.log(err);
        }
      }
      Utils.myRequest(guideProp);
    },
    showWView(lastImgLists, index){
      this.wViewIndex = index;
      this.wviewImages = lastImgLists;
      this.viewBoxState = true;
    },
    closeView(){
      this.viewBoxState = false;
    },
    // 改变图片
    changeImg(e) {
      let imgUrl = e.target.getAttribute("data-src");
      this.$refs.mainUrl.setAttribute("src", imgUrl);
    },
    // 改变列表长度
    changeListPic(e) {
      let fun = e.target.getAttribute("fun");
      let oSmallImgList = document.getElementById("samllImglist");
      let animate = new Animate(oSmallImgList, fun, 160);
      animate.todo();
    },
    computeDistance(startCoords, destCoords){
      var startLatRads = this.degreesToRadians(startCoords.latitude);
      var startLoingRads = this.degreesToRadians(startCoords.longitude);
      var destLatRads = this.degreesToRadians(destCoords.latitude);
      var destLongRads = this.degreesToRadians(destCoords.longitude);
      var Radius = 6371; // radius of the Earth in km
      var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLoingRads - destLongRads)) * Radius;
      return distance;
    },
    degreesToRadians(degrees){
      var radians = (degrees * Math.PI) / 180;
      return radians;
    },
    initMap(lat, lng){
      var startCoords = {
        latitude: localStorage.getItem("lat"),
        longitude:localStorage.getItem("lng")
      };
      var destCoords = {
        latitude: lat,
        longitude:lng
      };
      var km = this.computeDistance(startCoords, destCoords);
      return Math.floor(km);
    },

    jsonToArray: function(json){
      let array = json.split('[{').join('').split('}]').join('').split('},{');
      return this.gettxt(array);
    },
    gettxt(argument) {
      let txt = "";
      for (let i = 0; i < argument.length; i++) {
        let Item = argument[i].split(',');
        for (let n = 0; n < Item.length; n++) {
          let ItemArr = Item[n].split(':');
          if (ItemArr[0].split("\"").join("") === "title") {
            txt += ItemArr[1].split("\"").join("")
          }
        }
      }
      return txt.replace(/[\\n]/g, "")
    },

    jsonToHtml(json){
      let array = JSON.parse(json);
      this.$refs.jsonDetail.appendChild(this.getText(array));
    },
    getText(argument) {
      let DivEle = document.createElement("div");
      for (let i = 0; i < argument.length; i++) {
        let Item = argument[i];
        if (i>=1 && Item['title'] =="\n" && argument[i-1]['title'] != "\n"){
          let brNode = document.createElement("br");
          DivEle.appendChild(brNode);
        }
        if (Item['title'] && Item['title'] !=='\n'){
          let pEle = document.createElement("p");
          let textNode = document.createTextNode(Item['title']);
          pEle.appendChild(textNode);
          if(Item['bold'] === 1){
            pEle.style.fontWeight = "bold";
          }
          if(Item['font'] === 1){
            pEle.style.fontSize = Item['font']+"px";
          }
          if(Item['obliq'] === 1){
            pEle.style.fontStyle = "oblique";
          }
          if(Item['underline'] === 1){
            pEle.style.textDecoration = "underline";
          }
          if(Item['color']){
            pEle.style.color = Item['color'];
          }
          pEle.style.lineHeight = '30px';
          pEle.style.display = 'inline';
          DivEle.appendChild(pEle);
        }
        if(Item['img']){
          let ImgEle = document.createElement("img");
          ImgEle.setAttribute("src", Item['img']);
          ImgEle.style.maxWidth = "100%";
          ImgEle.style.display = "block";
          ImgEle.style.margin = 0;
          ImgEle.style.padding = 0;
          DivEle.appendChild(ImgEle);
        }
        if(Item['locImg']){
          let ImgEle = document.createElement("img");
          let imgSrc = 'static/images/rich_image_'+Item["locImg"]+'@2x.png';
          ImgEle.setAttribute("src", imgSrc);
          ImgEle.style.width = '100px';
          ImgEle.style.height= '20px';
          DivEle.appendChild(ImgEle);
        }
      }
      return DivEle;
    },
    // 限制显示字数
    limitworld(worlds, wordlength, mark) {
      if (worlds == null || worlds === ""){
        return "";
      }else{
        var nowLength = worlds.length;
        var newWorlds = "";
        if (nowLength > wordlength) {
          newWorlds = worlds.substr(0, wordlength) + mark;
        } else {
          newWorlds = worlds;
        }
        return newWorlds;
      }
    },
    gotoother(e){
      let id = e.target.getAttribute("activityId");
      this.$router.push({
        path: '/activityDetail',
        query: {
          id: id
        }
      })
    },
    // 评论翻页动画
    getComments() {
      this.loadState = true;
    },
    getOver(){
      this.loadState = false;
    },
    downApp() {
      this.$router.push({
        path: '/appDownload'
      })
    },
    count(start, end){
      let startTime = new Date(start);
      let endTime = new Date(end);
      let date = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60 * 24);
      return parseInt(date);
    },
    toJoin(){
      if(localStorage.getItem('token') === "" || localStorage.getItem('token') === null || localStorage.getItem("token") === "undefined"){
          this.$message.warning("请先登录");
          return false;
      }
      if(this.userStatusNum === 0) {
        this.showState = true;
        this.$refs.joinCon.style.display = "block";
        this.$refs.joinCon.setAttribute('class', 'animated bounceIn');
      }else if(this.userStatusNum === 1){
        this.$confirm('此操作将取消活动报名, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.cancelJoin();
        }).catch(() => {});
      }
    },
    subSuccess(){
      this.showState = false;
      this.$refs.joinCon.setAttribute('class', 'animated bounceOut');
      this.userStatusNum = 1;
      this.userStatus = "取消报名";
    },
    cancelJoin(){
        let that = this;
        let props = {
          url:"/Activity/JoinActivity",
          data:{
            "token": localStorage.getItem("token"),
            "id": that.$route.query.id,
            "userID": localStorage.getItem("uId"),
            "disabled": 0
          },
          sCallBack:res => {
            if(res.data.code === 1){
              that.$message.success("取消成功");
              that.userStatusNum = 0;
              that.userStatus = "我要报名";
            }else if(res.data.code === 4){
              that.refreshToken(that.cancelJoin());
            }else{
              that.$message.error("取消失败,请联系客服");
            }
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(props);
    },
    // 刷新token
    refreshToken(callBack){
      let refresh = {
        url:"/user/GetToken",
        data:{
          token:localStorage.getItem('token')
        },
        sCallBack:(res) => {
          localStorage.setItem("token", res.data.data)
          callBack && callBack();
        },
        eCallBack:(err) => {
          console.log(err);
        }
      }
      Utils.myRequest(refresh);
    },
    closeSubBox(){
        this.showState = false;
        this.$refs.joinCon.setAttribute('class', "animated bounceOut");
    },
    preloadImg(){
      document.addEventListener("error", function (e) {
        var elem = e.target;
        if (elem.tagName.toLowerCase() == 'img') {
          elem.src = "static/images/preload.png";
          elem.style.width = "100%";
          elem.style.height = "100%";
        }
      }, true);
    },
    showPersonList(){
      this.showState = true;
      this.showPerson = true;
      this.$nextTick(() => {
        this.$refs.personListBox.setAttribute("class", "animated bounceIn");
      });
    },
    closePersonList(){
      this.showState = false;
      this.$refs.personListBox.setAttribute("class", "animated bounceOut");
    }
  }
};
</script>
<style scoped>
  @import "../../assets/animate.min.css";
  .mainImgShow {
    width: 630px;
    height: 320px;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
  }

  .imgListBottom {
    width: 150px;
    height: 90px;
    overflow: hidden;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    float: left;
  }

  .imgListBottom img {
    width: 100%;
    min-height: 100%;
  }

  #samllImglist {
    position: absolute;
  }
  .activityNearBylist {
    position: relative;
    width:198px;
    height:168px;
  }

  .activityNearBylist .time {
    font-size: 12px;
    margin-top: 40px;
  }

  .activityInfo {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    top:0px;
    left:0px;
  }
  .activityInfo .time{
    font-size: 12px;
    margin-top: 40px;
  }
  .specialLi:nth-child(5n){
    margin-right:0px;
  }
  .entryBox{
    text-align: left;
    height: 450px;
    overflow-x:hidden;
    overflow-y:auto;
    padding-bottom:20px;
    scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
    scrollbar-highlight-color:#fff; /*- 左二 -*/
    scrollbar-face-color:#E4E4E4; /*- 面子 -*/
    scrollbar-arrow-color:#666; /*- 箭头 -*/
    scrollbar-shadow-color:#808080; /*- 右二 -*/
    scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
    scrollbar-base-color:#D7DCE0; /*- 基色 -*/
    scrollbar-track-color:#eee;/*- 滑道 -*/
  }
  .entryBox h1{
    cursor:pointer;
  }
  #wviewBox{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index: 9999;
  }
  .guideList {
    border: 1px solid #ddd;
    padding: 20px;
    line-height: 35px !important;
  }

  .guideList p {
    display: inline-block;
  }

  .guideList p:nth-child(1) {
    width: 100px;
  }

  .guideList p:last-child {
    float: right;
  }
  .summary pre{
    display: block;
    font-family: "Microsoft YaHei";
    margin: 1em 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height:25px;
    font-size:14px;
    text-align: left;
  }
  #joinCon{
    display:none;
    width:870px;
    height:510px;
    position: fixed;
    top:50%;
    left:50%;
    margin-left:-435px;
    margin-top:-255px;
    background:rgba(255,255,255,0.7);
    padding:10px;
    border-radius: 8px;
    z-index:9999999;
  }
  #personsList{
    width:870px;
    height:510px;
    position: fixed;
    top:50%;
    left:50%;
    margin-left:-435px;
    margin-top:-255px;
    background:rgba(255,255,255,0.7);
    padding:10px;
    border-radius: 8px;
    z-index:999;
  }
  #shadow{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.6);
    z-index:200;
  }
  #personsBtn{
    width:80px;
    height: 100px;
    background:#119C5B;
    color:#fff;
    position:fixed;
    top:50%;
    margin-top:-50px;
    right:5vw;
    text-align: center;
    font-size:14px;
    cursor: pointer;
    border-radius:4px;
  }
  #personsBtn img{
    display: block;
    width:40px;
    height:40px;
    margin:10px auto;
  }
  #addressBox{
  	font-size:14px;
  	padding:15px;
  	line-height:30px;
  }
  #addressBox span{
  	margin-right: 30px;
  }
</style>
